<template>
  <div>
    <div
      uuid="1574993863115"
      k="79"
      class="lc-row  lc-row--lg"
      style="margin-bottom: 0px; margin-top: 0px; padding-top: 0px; padding-bottom: 0px;"
    >
      <div
        uuid="1574065527046"
        canplace="true"
        k="80"
        groupid=""
        class="lc-col  lc-col--cols-full"
      >
        <div>
          <div class="lc-ad-accordion lc-ad-accordion--lg">
            <div
              class="lc-ad-accordion__item "
              clstag="pageclick|keycount|ad_accordion_1574993860931|ad_0"
              style="transition-duration: 500ms; background-color: rgb(255, 255, 255);"
              v-for="item in this.list"
              :key="item.index"
              :class="
                item.id == 1
                  ? 'lc-ad-accordion__item--active'
                  : 'lc-ad-accordion__item--inactive'
              "
              @mouseover="huodong(item.index)"
            >
              <div
                class="lc-ad-accordion__item-title"
                :style="
                  item.id == 1
                    ? 'color: rgb(154, 6, 22)'
                    : 'color: rgb(51, 51, 51)'
                "
              >
                {{ item.title }}
              </div>
              <div
                class="lc-ad-accordion__item-desc"
                :style="
                  item.id == 1
                    ? 'color: rgb(154, 6, 22)'
                    : 'color:  rgb(2, 2, 2)'
                "
              >
                {{ item.huodong }}
              </div>
              <div
                class="lc-ad-accordion__item-btn"
                style="color: rgb(255, 255, 255); background-color: rgb(154, 6, 22); border-color: rgb(154, 6, 22);"
              >
                GO
              </div>
              <div
                class="lc-ad-accordion__item-img"
                style="transition-duration: 600ms;"
              >
                <img :src="item.img" />
              </div>
            </div>
            <!-- <div
              class="lc-ad-accordion__item lc-ad-accordion__item--inactive"
              clstag="pageclick|keycount|ad_accordion_1574993860931|ad_1"
              style="transition-duration: 500ms; background-color: rgb(255, 255, 255);"
                @mouseover="huodong(type_2,$event)"
            >
              <div
                class="lc-ad-accordion__item-title"
                style="color: rgb(51, 51, 51);"
              >
                考研考证冲刺
              </div>
              <div
                class="lc-ad-accordion__item-desc"
                style="color: rgb(2, 2, 2);"
              >
                不止5折
              </div>
              <div
                class="lc-ad-accordion__item-btn"
                style="color: rgb(255, 255, 255); background-color: rgb(154, 6, 22); border-color: rgb(154, 6, 22);"
              >
                GO
              </div>
              <div
                class="lc-ad-accordion__item-img"
                style="transition-duration: 600ms;"
              >
                <img
                  src="//img13.360buyimg.com/babel/s400x400_jfs/t1/203660/23/11379/40192/61694ce5Ee903ae03/68f49548d2e5bd28.png!cc_400x400.webp"
                />
              </div>
            </div>
            <div
              class="lc-ad-accordion__item lc-ad-accordion__item--inactive"
              clstag="pageclick|keycount|ad_accordion_1574993860931|ad_2"
              style="transition-duration: 500ms; background-color: rgb(255, 255, 255);"
               @mouseover="huodong(type_3,$event)"
            >
              <div
                class="lc-ad-accordion__item-title"
                style="color: rgb(51, 51, 51);"
              >
                大牌书店
              </div>
              <div
                class="lc-ad-accordion__item-desc"
                style="color: rgb(2, 2, 2);"
              >
                满99减10
              </div>
              <div
                class="lc-ad-accordion__item-btn"
                style="color: rgb(255, 255, 255); background-color: rgb(154, 6, 22); border-color: rgb(154, 6, 22);"
              >
                GO
              </div>
              <div
                class="lc-ad-accordion__item-img"
                style="transition-duration: 600ms;"
              >
                <img
                  src="//img10.360buyimg.com/babel/s400x400_jfs/t1/204632/30/11150/22862/6167dc84E42852fc0/1b787eb45989a470.png!cc_400x400.webp"
                />
              </div>
            </div>
            <div
              class="lc-ad-accordion__item lc-ad-accordion__item--active "
              clstag="pageclick|keycount|ad_accordion_1574993860931|ad_3"
              style="transition-duration: 500ms; background-color: rgb(255, 255, 255);"
                @mouseover="huodong(1,$event)"
            >
              <div
                class="lc-ad-accordion__item-title"
                style="color: rgb(51, 51, 51);"
              >
                人文社科
              </div>
              <div
                class="lc-ad-accordion__item-desc"
                style="color: rgb(2, 2, 2);"
              >
                每满100减50
              </div>
              <div
                class="lc-ad-accordion__item-btn"
                style="color: rgb(255, 255, 255); background-color: rgb(154, 6, 22); border-color: rgb(154, 6, 22);"
              >
                GO
              </div>
              <div
                class="lc-ad-accordion__item-img"
                style="transition-duration: 600ms;"
              >
                <img
                  src="//img30.360buyimg.com/babel/s400x400_jfs/t1/147121/25/22754/18612/6168e4d9E492bd486/b8dff7ab06cc569a.png!cc_400x400.webp"
                />
              </div>
            </div>
            <div
              class="lc-ad-accordion__item lc-ad-accordion__item--inactive "
              clstag="pageclick|keycount|ad_accordion_1574993860931|ad_4"
              style="transition-duration: 500ms; background-color: rgb(236, 230, 227);"
                @mouseover="huodong(type_4,$event)"
            >
              <div
                class="lc-ad-accordion__item-title"
                style="color: rgb(154, 6, 22);"
              >
                励志分会场
              </div>
              <div
                class="lc-ad-accordion__item-desc"
                style="color: rgb(154, 6, 22);"
              >
                每满100减50
              </div>
              <div
                class="lc-ad-accordion__item-btn"
                style="color: rgb(255, 255, 255); background-color: rgb(154, 6, 22); border-color: rgb(154, 6, 22);"
              >
                GO
              </div>
              <div
                class="lc-ad-accordion__item-img"
                style="transition-duration: 600ms;"
              >
                <img
                  src="//img14.360buyimg.com/babel/s400x400_jfs/t1/203424/29/8717/49820/61542baeEe2167b4c/d208709ec12b2220.png!cc_400x400.webp"
                />
              </div>
            </div> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          id: 0,
          index: 1,
          title: "文学小说",
          huodong: "每满100减50",
          img:
            "	//img10.360buyimg.com/babel/s400x400_jfs/t1/220851/4/6384/46406/61a8c363Eaced5b2d/85bdf6bf3103f3a7.png!cc_400x400.webp",
        },
        {
          id: 0,
          index: 2,
          title: "万种童书",
          huodong: "每满100减50",
          img:
            "	//img10.360buyimg.com/babel/s400x400_jfs/t1/211091/4/11352/22729/61a83c0cE7d586427/5144e94813fe0d1b.png!cc_400x400.webp",
        },
        {
          id: 0,
          index: 3,
          title: "健康美好",
          huodong: "每满100减50",
          img:
            "	//img11.360buyimg.com/babel/s400x400_jfs/t1/200642/19/17713/53116/61a98395Efed85b85/416f3fc1d4948ef1.png!cc_400x400.webp",
        },
        {
          id: 1,
          index: 4,
          title: "大牌书店",
          huodong: "满99减10",
          img:
            "	//img11.360buyimg.com/babel/s400x400_jfs/t1/218558/26/6066/63997/61a4427bE0d71d4ae/47a66a00d88bc4e7.png!cc_400x400.webp",
        },
        {
          id: 0,
          index: 5,
          title: "考试考证",
          huodong: "每满100减50",
          img:
            "	//img12.360buyimg.com/babel/s400x400_jfs/t1/215400/11/6434/54139/61a9d1d4Ea962868e/b36ec88a589a1c50.png!cc_400x400.webp",
        },
      ],
    };
  },
  methods: {
    huodong(i) {
      ;

      for (let item of this.list) {
        item.id = 0;
      }

      this.list[i - 1].id = 1;
    },
  },
};
</script>

<style>
.lc-ad-accordion {
  height: 300px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  margin: 0 auto;
}
.lc-ad-accordion--md {
  width: 990px;
}
.lc-ad-accordion--lg {
  width: 1190px;
}
.lc-ad-accordion__item {
  float: left;
  width: 200px;
  height: 300px;
  transition: all 0.5s linear;
  overflow: hidden;
  position: relative;
  padding: 30px 20px 40px;
  background: #fff;
  box-shadow: 3px 2px 30px rgba(0, 0, 0, 0.1);
  text-align: center;
  margin: 0;
  box-sizing: border-box;
  cursor: pointer;
}
.lc-ad-accordion__item-title {
  font-size: 18px;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lc-ad-accordion__item-desc {
  font-size: 14px;
  color: #666;
  padding: 10px 10px 0 0;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lc-ad-accordion__item-btn {
  font-size: 14px;
  padding: 5px 24px;
  color: #fff;
  background: rgba(255, 255, 255, 0);
  margin-top: 33px;
  border: 2px solid #fff;
  border-radius: 18px;
  text-align: center;
  display: inline-block;
}
.lc-ad-accordion__item-img {
  position: absolute;
  left: 50%;
  margin-left: -75px;
  bottom: 40px;
  width: 150px;
  height: 150px;
  overflow: hidden;
  transition: all 0.6s ease-out;
}
.lc-ad-accordion__item img {
  width: 100%;
  height: 100%;
}
.lc-ad-accordion__item--active {
  text-align: left;
  width: 390px;
}
.lc-ad-accordion__item--active .lc-ad-accordion__item-btn {
  display: inline-block;
}
.lc-ad-accordion__item--active .lc-ad-accordion__item-desc {
  text-align: left;
}
.lc-ad-accordion__item--active .lc-ad-accordion__item-img {
  left: auto;
  margin-left: 0;
  right: 20px;
  bottom: 20px;
  width: 200px;
  height: 200px;
}
.lc-ad-accordion__item--inactive {
  width: 200px;
}
.lc-ad-accordion__item--inactive .lc-ad-accordion__item-btn {
  display: none;
}
.lc-ad-accordion__item--inactive .lc-ad-accordion__item-desc {
  text-align: center;
}
.lc-ad-accordion__item--inactive .lc-ad-accordion__item-img {
  background: transparent;
  width: 150px;
  height: 150px;
  margin-left: -75px;
  bottom: 40px;
}
.lc-ad-accordion--atom .lc-ad-accordion__item--active {
  width: 384px;
}
</style>
